<template>
  <n-drawer class="underwear-orders" v-model:show="active" width="89.06%">
    <n-drawer-content style="--n-body-padding:0 30px;--n-header-border-bottom:none;" closable>
      <template #header>
        <div class="my-title--primary">内裤订单</div>
      </template>
      <div class="underwear-orders__content">
        <header>
          <span>搜索会员</span>
          <n-input placeholder="请输入会员姓名/电话"></n-input>
          <span>领取状态</span>
          <nav>
            <label>
              <input type="radio" name="getType" checked />
              <div>全部</div>
            </label>
            <label>
              <input type="radio" name="getType" />
              <div>待领取</div>
            </label>
            <label>
              <input type="radio" name="getType" />
              <div>已领完</div>
            </label>
          </nav>
          <button>重置</button>
        </header>
        <n-data-table :columns="columns" :data="data" :max-height="725" :scroll-x="2800" striped />
      </div>
      <template #footer>
        <div style="display: flex; align-items: center; width: 100%;">
          <n-pagination :page-count="100" :page-slot="7" style="--n-item-size:44px;--n-item-font-size:20px;">
            <template #prev>
              上一页
            </template>
            <template #next>
              下一页
            </template>
            <template #suffix>
              <div class="underwear-orders__jump-page">到<input type="number" />页<button>确定</button><span>10 条 / 页</span>
              </div>
            </template>
          </n-pagination>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
  <detail></detail>
</template>
<script setup>
import { ref, h } from 'vue';
import btnType from './@fragment/btn-type.vue';
import detail from './detail.vue'
const active = ref(true);
const columns = [
  {
    title: '订单编号',
    key: 'orderNumber',
    width: 410,
  },
  {
    title: '订单记录',
    key: 'history'
  },
  {
    title: '会员电话',
    key: 'phone'
  },
  {
    title: '会员所属',
    key: 'affiliated',
  },
  {
    title: '订单金额（￥）',
    key: 'amount',
  },
  {
    title: '最近领取时间',
    key: 'getTime',
  },
  {
    title: '领取次数',
    key: 'getNumber ',
  },
  {
    title: '剩余次数',
    key: 'remaining',
  },
  {
    title: '操作',
    key: 'actions',
    className: 'actions',
    fixed: 'right',
    width: 457,
    render() {
      return h(btnType)
    }
  }
], data = Array.from({ length: 46 }).map((_, index) => ({
  key: index,
  orderNumber: `HDNK-20221230212456325301`,
  history: '张老五',
  phone: '13678945625',
  affiliated: '北湖区健康路4号...',
  amount: `88`,
  getTime: '2022-10-11 08:30:55',
  getNumber: 3,
  remaining: 3,
  actions: ''
}));
</script>

<style lang="less" scoped>
.underwear-orders {
  .underwear-orders__content {
    >header {
      display: flex;
      align-items: center;
      padding-bottom: 28px;
      box-sizing: border-box;

      >span {
        font-size: 26px;
        font-family: PingFang SC;
        color: #4A5060;
      }

      /deep/ .n-input {
        margin: 0 60px 0 20px;
        width: 380px;
        height: 60px;

        &__placeholder {
          color: #666;
        }
      }

      >nav {
        display: flex;
        margin-left: 20px;
        height: 58px;
        border-radius: 5px;
        border: 1px solid #E5E5E5;
        overflow: hidden;

        >label {
          position: relative;

          >input {
            display: block;
            width: 0;
            height: 0;
            opacity: 0;
          }

          >input+div {
            width: 108px;
            height: 58px;
            font-size: 26px;
            color: #666;
            text-align: center;
            line-height: 58px;
          }

          >input:checked+div {
            background-color: #2C8CF0;
            color: #fff;
          }
        }

        >label+label {
          &::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 100%;
            background-color: #E5E5E5;
          }
        }
      }

      >button {
        margin-left: 18px;
        width: 112px;
        height: 58px;
        font-size: 26px;
        color: #4A5060;
        background: #F8F8F8;
        border: 1px solid #AAAAAA;
        border-radius: 5px;
      }
    }
  }

  &__jump-page {
    font-size: 21px;
    color: #4A5060;
    margin: -2px 0 0 18px;

    input {
      margin: 0 15px;
      width: 64px;
      height: 42px;
      background: #F8F8F8;
      border: 1px solid #E5E5E5;
      border-radius: 5px;
      text-align: center;
    }

    button {
      margin: 0 30px;
      width: 88px;
      height: 44px;
      color: #FDFDFD;
      background: #2C8CF0;
      border-radius: 5px;
    }
  }
}
</style>